<template>
	<view class="dakalist">
		<view class="headwrap">
			<image class="i-img" :src="itemInfo.user_headimg||'../../static/img/99.png'"></image>
			<view class="i-name">
				<view style="display: flex;align-items: baseline;">
					<view>{{itemInfo.user_nickname}}</view>
					<view class="i-nickname">{{"("+itemInfo.stu_name+")"}}</view>
				</view>
				<!-- <view class="i-status">已坚持3天</view> -->
			</view>
		</view>
		<view class="list-wrap">
			<view class="i-list-sorce">
				<view v-if="itemInfo.video_url.imgurl" class="imgwrap">
					<image class="i-img" :src="itemInfo.video_url.imgurl"></image>
				</view>
				<view v-if="itemInfo.video_url.videourl" class="i-sorce">
					<vs-ratio-view ratio="16/9" overflow="hidden">
						<video class="i-video" :src="itemInfo.video_url.videourl" ></video>
					</vs-ratio-view>
					<view class="i-text">
						<view class="t">6天前</view>
						<view class="t m">浏览68次</view>
					</view>
				</view>
			</view>
			<view class="i-list-item">
				<view class="i-listwrap">
					<view class="i-item-box"  v-for="(item,index) in btlist" :key="index">
						<view class="i-item-icon">
							<vs-icon :type="item.icon" size="18"></vs-icon>
						</view>
						<view class="">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const { windowWidth, windowHeight } = uni.getSystemInfoSync();	
	export default{
		props:{
			itemInfo:{}  
			
		},
		data(){
			return{
				windowWidth:windowWidth,
				windowHeight:windowHeight,
				btlist:[
					{name:'点评',icon:'icon-bianjiqianbi'},
					//{name:'勋章',icon:'icon-xunzhang'},
					{name:'评论',icon:'icon-pinglun'},
					{name:'赞',icon:'icon-zan'},
					{name:'分享',icon:'icon-xinbaniconshangchuan-'}
				]
			}
		},
		methods:{
			fnGetDakainfoList(){
				
				
			}
		}
	}
</script>

<style lang="scss">
	.dakalist{
		width: 100%;
		//max-width: 750px;
		display: flex;
		
		flex-direction: column;
		align-items: center;
		background: #fff;
		box-shadow: 3px 3px 10px -2px #C0C0C0;
		.headwrap{
			width: 95%;
			display: flex;
			//background-color: #007AFF;
			padding: 8px 0;
			align-items: center;
			.i-img{
				width: 35px;
				height: 35px;
				border-radius: 100%;
			}
			.i-name{
				margin-left: 10px;
				font-size: 14px;
				color: $uni-text-color;
				.i-nickname{
					font-size: 10px;
					color: #666;
				}
				.i-status{
					font-size: 10px;
				}
			}
		}
		.list-wrap{
			width: 100%;
			border-radius: 4px;
			//border: 1px solid #C0C0C0;
			background-color: #fff;
			padding-bottom: 10px;
			
			.i-list-sorce{
				width: 100%;
				//background-color: #cccc20;
			//	border-top: 1px solid #eee;
			//	border-left: 1px solid #eee;
				box-shadow: 2px 2px 10px -5px #C0C0C0;
				border-radius: 4px;
				display: flex;
				flex-direction: column;
				align-items: center;
				.imgwrap{
					width: 100%;
					padding-left: 4%;
					.i-img{
						width: 100px;
						height: 100px;
					}
				}
				.i-sorce{
					width: 92%;
					text-align: center;
					background-color: #333333;
					.i-video{
						width: 100%;
						// min-height: 180px;
						//max-width: 640px * 0.95;
						height: 100%;
						vertical-align: middle;
					}
					.i-text{
						//width: 100%;
						//height: 30px;
						//background-color: #fffc9e;
						display: flex;
						//justify-content: center;
						padding: 5px 0;
						.t{
							margin-left: 10px;
							font-size: 10px;
							color: #808080;
						}
						.m{
							margin-left: 15px;
						}
					}
				}
			}
			.i-list-item{
				width: 100%;
				display:flex;
				align-items: center;
				justify-content: center;
				//background-color: #7dffdf;
				color: #808080;
				//margin-top: 5px;
				.i-listwrap{
					width: 95%;
					display: flex;
					//background: #007AFF;
					.i-item-box{
						display: flex;
						align-items: center;
						margin-right: 5px;
						font-size: 12px;
						.i-item-icon{ 
							padding: 3px;
							//background: #2C405A;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.i-name{
							//margin-left: 3px;
						}
					}
					
				}
			}
		}
	}
</style>
